import { Component, OnInit, HostBinding, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { NewTaskComponent } from '../new-task/new-task.component';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { CopyTaskComponent } from '../copy-task/copy-task.component';
import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
import { NewTaskListComponent } from '../new-task-list/new-task-list.component';
import { slideToRight } from '../../anims/router.anima';
import * as fromRoot from '../../reducers';
import { Store } from '@ngrx/store';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { TaskList, Task } from '../../domain/index';
import {
  TaskListDeleteFailAction,
  TaskListDeleteAction,
  TaskListUpdateAction,
  TaskListAddAction
} from '../../actions/task-list.action';
import { TaskAddAction, TaskUpdateAction, TaskMoveAllAction } from '../../actions/task.action';
@Component({
  selector: 'app-task-home',
  templateUrl: './task-home.component.html',
  styleUrls: ['./task-home.component.scss'],
  animations: [
    slideToRight
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TaskHomeComponent implements OnInit {
  // 绑定路由动画触发器
  @HostBinding('@routeAnim') state;

  projectId$: Observable<string>;
  lists$: Observable<TaskList[]>;
  constructor(private dialog: MatDialog,
    private cd: ChangeDetectorRef,
    private route: ActivatedRoute,
    private store$: Store<fromRoot.State>) {
    this.projectId$ = this.route.paramMap.pluck('id');
    this.lists$ = this.store$.select(fromRoot.getTaskByList);
  }

  ngOnInit() {
  }
  // 新建列表
  launchNewListDialog() {
    const dialogRef = this.dialog.open(NewTaskListComponent,
      {
        data: {
          title: '新建项目列表'
        }
      }
    );
    dialogRef.afterClosed().subscribe(result => console.log(result));
  }
  // 修改列表
  launchEditListDailog(list) {
    const dialogRef = this.dialog.open(NewTaskListComponent,
      {
        data: {
          title: '更改列表名称',
          taskList: list
        }
      }
    );
    dialogRef.afterClosed()
      .take(1) // 只获取一次事件
      .subscribe(result => this.store$.dispatch(new TaskListUpdateAction({ ...result, id: list.id })));
  }
  launchNewTaskDialog(list) {
    const user$ = this.store$.select(fromRoot.getAuthState).map(auth => auth.user);
    user$.take(1)
      .map(user => this.dialog.open(NewTaskComponent, {
        data: {
          title: '新建任务',
          owner: user.id
        }
      })).switchMap(dialogRef => dialogRef.afterClosed().take(1).filter(n => n))
      .subscribe(val => this.store$.dispatch(new TaskAddAction({ ...val, taskListId: list.id, completed: false, createDate: new Date() })));
  }
  launchCopyTaskDialog(list) {
    //  打开copyCompent 传递 lists
    // const dialogRef = this.dialog.open(CopyTaskComponent, {
    //   data: { lists: this.lists }
    // });
    this.lists$.map(l => l.filter(n => n.id !== list.id))
      .map(li => this.dialog.open(CopyTaskComponent, { data: { lists: li } }))
      .switchMap(dialogRef => dialogRef.afterClosed().take(1).filter(n => n))
      .subscribe(val => this.store$.dispatch(new TaskMoveAllAction({ srclistId: list.id, target: val })));
  }
  lanunchUpdateTaskDialog(task) {
    const dialogRef = this.dialog.open(NewTaskComponent, {
      data: {
        title: '修改任务',
        task: task
      }
    });
    dialogRef.afterClosed()
      .take(1) // 只获取一次事件
      .filter(n => n) // 如果是true的时候才执行下一步
      .subscribe(val => this.store$.dispatch(new TaskUpdateAction({ ...task, ...val })));
  }
  launchConfirmDialog(list) {
    const dialogRef = this.dialog.open(ConfirmDialogComponent,
      {
        data: {
          title: '删除列表',
          content: '您确定删除该任务列表吗?'
        }
      }
    );
    dialogRef.afterClosed()
      .take(1) // 只获取一次事件
      .filter(n => n) // 如果是true的时候才执行下一步
      .subscribe(result => this.store$.dispatch(new TaskListDeleteAction(list)));
  }
  handleMove(srcData, list) {
    switch (srcData.tag) {
      case 'task-item':
        console.log('handing item');
        break;
      case 'task-list':
        console.log('handing list');
        const srcList = srcData.data;
        const tempOrder = srcList.order;
        srcList.order = list.order;
        list.order = tempOrder;
        break;
      default:
        break;
    }
  }
  handleQuickTask(desc: string, list) {
    const user$ = this.store$.select(fromRoot.getAuthState).map(auth => auth.user);
    user$.take(1)
      .subscribe(user => this.store$.dispatch(new TaskAddAction({
        desc: desc,
        priority: 3,
        taskListId: list.id,
        ownerId: user.id,
        completed: false,
        createDate: new Date(),
        participantIds: []
      })));
  }
}
